<template>
<view>
	<view class="group-box" :style="'min-height:calc(100vh - 122rpx - '+CustomBar+'px)'">
		<view class="caption">
			<view class="flex" @click="chooseFutures">
				<text>新湖期货</text>
				<image src="@/static/home/subpage/drop-gray.png"></image>
			</view>
			<view class="flex" @click="chooseContract">
				<text>郑州商品交易所-纯碱2401</text>
				<image src="@/static/home/subpage/drop-gray.png"></image>
			</view>
		</view>
		<view class="navbar-box">
			<view class="box">
				<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">多单持仓</view>
				<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">空单持仓</view>
				<view class="li" :class="{'active':navfixIndex==2}" @click="navfix(2)">净持仓</view>
				<view class="li" :class="{'active':navfixIndex==3}" @click="navfix(3)">成交量</view>
			</view>
		</view>
		<block v-if="true">
			<view v-if="navfixIndex==2" class="bodys">
				<view class="hot-title">
					<view class="left">
						<view class="title-text">净持仓走势图</view>
					</view>
				</view>
				<view class="info-box">
					<view class="date">
						<text>数据时间11-7</text>
						<!-- <text>看当日排行</text> -->
					</view>
					<view class="fix-box">
						<view class="tab">
							<image src="@/static/home/subpage/charts5.png"></image>
							<text>净持仓数值</text>
							<text>7386</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts2.png"></image>
							<text>收盘价</text>
							<text>1755</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts6.png"></image>
							<text>增减变化 </text>
							<text>8</text>
						</view>
					</view>
				</view>
				<view class="qiun-charts-box">
					<view class="legend">
						<text>净持仓数据</text>
						<text>收盘价</text>
					</view>
					<view class="qiun-charts" style="height:276rpx">
						<l-echart ref="lineChart" @finished="lineInit"></l-echart>
					</view>
					<view class="legend">
						<text>净持仓增减变化</text>
					</view>
					<view class="qiun-charts">
						<l-echart ref="barChart" @finished="barInit"></l-echart>
					</view>
				</view>
				<slider-range
					:value="[30, 90]"
					:min="5"
					:max="200"
					:step="5"
					height="20"
					:bar-height="7"
					:block-size="16"
					background-color="#fff"
					active-color="#EAF0FD"
					:format="format"
					:tipVisible="false"
					:decorationVisible="true"
					@change="handleRangeChange"
				></slider-range>
			</view>
			<view v-else class="bodys">
				<view class="info-box">
					<view class="date">
						<text>数据时间11-7</text>
						<!-- <text>看当日排行</text> -->
					</view>
					<view class="fix-box">
						<view class="tab">
							<image src="@/static/home/subpage/charts11.png"></image>
							<text>多单持仓</text>
							<text>432661手</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts3.png"></image>
							<text>空单持仓</text>
							<text>432661手</text>
						</view>
					</view>
				</view>
				<view class="qiun-charts-box">
					<view class="legend">
						<text>手</text>
						<text>元</text>
					</view>
					<view class="qiun-charts">
						<l-echart ref="mixChart" @finished="mixInit"></l-echart>
					</view>
				</view>
			</view>
			<view v-if="navfixIndex==2" class="table-box">
				<view class="hot-title">
					<view class="left">
						<view class="title-text">净持仓与价格变化相关性</view>
					</view>
					<view class="check" @click="coefficientUse">
						<text>如何运用相关系数</text>
						<image src="@/static/home/subpage/icn_right.png"></image>
					</view>
				</view>
				<view class="item-box">
					<view class="item">
						<view class="title title-green">净持仓数值与价格</view>
						<view class="table-box">
							<view class="table">
								<view class="tr">
									<view class="tl">
										<text>周期</text>
										<image src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>胜率</text>
										<image @click="isexplain=true" src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>相关系数</text>
										<image @click="iscoefficient=true" src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>相关性判断</text>
										<image src="@/static/home/subpage/query.png"></image>
									</view>
								</view>
								<view class="box">
									<view class="row" v-for="(item,index) in 4">
										<view class="tl">近60日</view>
										<view class="tl">50%</view>
										<view class="tl">0.1650</view>
										<view class="tl">中度负相关</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title title-orange">净持仓增减与价格</view>
						<view class="table-box">
							<view class="table">
								<view class="tr">
									<view class="tl">
										<text>周期</text>
										<image src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>胜率</text>
										<image @click="isexplain=true" src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>相关系数</text>
										<image @click="iscoefficient=true" src="@/static/home/subpage/query.png"></image>
									</view>
									<view class="tl">
										<text>相关性判断</text>
										<image src="@/static/home/subpage/query.png"></image>
									</view>
								</view>
								<view class="box">
									<view class="row" v-for="(item,index) in 4">
										<view class="tl">近60日</view>
										<view class="tl">50%</view>
										<view class="tl">0.1650</view>
										<view class="tl">中度负相关</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="table-box">
				<view class="table">
					<view class="tr">
						<view class="tl">日期</view>
						<view class="tl">多单持仓</view>
						<view class="tl">增减</view>
						<view class="tl">持仓均价</view>
					</view>
					<view class="box">
						<view class="row" v-for="(item,index) in 10">
							<view class="tl">2023-11-07</view>
							<view class="tl">14240</view>
							<view class="tl">479</view>
							<view class="tl">583.43</view>
						</view>
					</view>
					<!-- <view class="total">
						<view class="lab">合计</view>
						<view class="amount">
							<text>432661</text>
							<text class="cl-green">-39390</text>
						</view>
					</view> -->
				</view>
			</view>
		</block>
		<view v-else class="nodata">
			<image src="@/static/home/subpage/no-data.png"></image>
		</view>
	</view>
	
	<!-- 胜率说明 -->
	<view class="explain-modal" @touchmove.stop.prevent :hidden="!isexplain">
		<view class="shade"></view>
		<view class="explain-box">
			<view class="caption">胜率说明</view>
			<view class="info">对应期货公司周期内历史胜率</view>
			<view class="know" @click="isexplain=false">我知道了</view>
		</view>
	</view>
	<!-- 相关系数说明 -->
	<view class="coefficient-modal" @touchmove.stop.prevent :hidden="!iscoefficient">
		<view class="shade"></view>
		<view class="explain-box">
			<view class="caption">相关系数说明</view>
			<view class="info">
				<view class="info-box">
					<view class="sup">
						<text>-1(完全负相关)</text>
						<text>(完全正相关) 1</text>
					</view>
					<image mode="widthFix" src="@/static/home/subpage/scale.png"></image>
					<view class="sub">
						<text>
							相关系数:判断数据相关关系若系数为1，
							则两者走势完全相同:若系数为-1，
							则两者走势完全相反;
							若系数为0，则两者走势没有关系
						</text>
					</view>
				</view>
			</view>
			<view class="know" @click="iscoefficient=false">我知道了</view>
		</view>
	</view>
</view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';	
export default {
	name:"course",
	data() {
		return {
			CustomBar: this.CustomBar,
			navfixIndex:0,
			rangeValue:[0,0],
			lineOption:{},
			barOption:{},
			mixOption:{},
			animationData: {},
			animation:{},
			animation1Data: {},
			iscontract: false,
			isfutures: false,
			isexplain: false,
			iscoefficient: false,
		};
	},
	mounted(){
		var animation = uni.createAnimation({
			duration: 500,
			timingFunction: 'ease',
		})
		this.animation =animation;
	},
	methods:{
		mixInit() {
			this.mixOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '2',
					left:'0',
					top:'10',
					bottom:'2',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						// data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24', '2023-10-25','2023-10-26','2023-10-27'],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							margin: 10,
							formatter: function (value, index) {
								if(index==0||index==7) return value;
							},
							showMinLabel : true,
							showMaxLabel : true,
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '手',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
					},
					{
						type: 'value',
						// name: '元',
						position: 'right',
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
						min: 1600
					}
				],
				series: [
					{
						name: '多单持仓',
						type: 'bar',
						yAxisIndex: 0,
						barWidth:'7',
						data:[
							["2023-10-20", 12858],
							["2023-10-21", 13858],
							["2023-10-22", 12858],
							["2023-10-23", 14858],
							["2023-10-24", 10858],
							["2023-10-25", 10858],
							["2023-10-26", 12858],
							["2023-10-28", 9858],
						],
						 // connectNulls: true,
						itemStyle:{
							color:'#EE5953'
						}
					},
					{
						name: '持仓均价',
						type: 'line',
						yAxisIndex: 1,
						data:[
							["2023-10-20", 1662],
							["2023-10-22", 1715],
							["2023-10-24", 1663],
							["2023-10-26", 1716],
							["2023-10-28", 1710],
						],
						symbol: 'none',
						itemStyle:{
							color:'#FFA200'
						},
						lineStyle:{
							width:2
						},
					}
				]
			}
			this.$refs.mixChart.init(echarts, chart=> {
				chart.setOption(this.mixOption);
			});
		},
		lineInit() {
			this.lineOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '2',
					left:'0',
					top:'10',
					bottom:'10',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24', '2023-10-25','2023-10-26','2023-10-27'],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false,
							// margin: 10,
							// formatter: function (value, index) {
							// 	if(index==0||index==7) return value;
							// },
							// showMinLabel : true,
							// showMaxLabel : true,
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '手',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
					},
					{
						type: 'value',
						// name: '元',
						position: 'right',
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
						min: 1600
					}
				],
				series: [
					{
						name: '净持仓数据',
						type: 'line',
						yAxisIndex: 0,
						data:[4301,17200,4308,15022,4301,17200,4308,15022],
						symbol: 'none',
						itemStyle:{
							color:'#0BDEC9'
						},
						lineStyle:{
							width:2
						},
					},
					{
						name: '收盘价',
						type: 'line',
						yAxisIndex: 1,
						data:[1682,1800,1690,1799,1682,1800,1690,1799],
						symbol: 'none',
						itemStyle:{
							color:'#356FE5'
						},
						lineStyle:{
							width:2
						},
					}
				]
			}
			this.$refs.lineChart.init(echarts, chart=> {
				chart.setOption(this.lineOption);
			});
		},
		barInit() {
			this.barOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '2',
					left:'0',
					top:'10',
					bottom:'2',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24', '2023-10-25','2023-10-26','2023-10-27'],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							margin: 10,
							formatter: function (value, index) {
								if(index==0||index==7) return value;
							},
							showMinLabel : true,
							showMaxLabel : true,
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '手',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
					},
					{
						type: 'value',
						// name: '元',
						position: 'right',
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
						min: 1600
					}
				],
				series: [
					{
						name: '净持仓增减变化',
						type: 'bar',
						yAxisIndex: 0,
						barWidth:'10',
						data:[4301,17200,4308,15022,4301,17200,4308,15022],
						itemStyle:{
							color:'#EE5953'
						}
					},
					{
						name: '净持仓增减变化',
						type: 'bar',
						yAxisIndex: 1,
						barWidth:'10',
						data:[1682,1800,1690,1799,1682,1800,1690,1799],
						itemStyle:{
							color:'#EE5953'
						}
					}
				]
			}
			this.$refs.barChart.init(echarts, chart=> {
				chart.setOption(this.barOption);
			});
		},
		navfix(index){
			this.navfixIndex =index;
			if(this.$refs.mixChart){
				if(index!=2) this.mixInit();
			}
		},
		chooseContract(){
			this.$emit('chooseContract', {
				// isshare: false
			})
		},
		closeContract(){
			this.$emit('closeContract', {
				// isshare: false
			})
		},
		chooseFutures(){
			this.$emit('chooseFutures', {
				// isshare: false
			})
		},
		closeFutures(){
			this.$emit('closeFutures', {
				// isshare: false
			})
		},
		format(val) {
			return val + '%'
		},
		handleRangeChange(e) {
			this.rangeValue = e;
			// console.log(this.rangeValue);
		},
		coefficientUse(){
			uni.navigateTo({
				url: '/pages/homeSubpage/coefficientUse/coefficientUse'
			});
		},
	}	
}
</script>

<style lang="scss" scoped>
.group-box{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:24rpx;
	box-sizing: border-box;
	.caption{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom:2rpx solid #F6F7F9;
		padding-bottom:24rpx;
		.flex{
			display: flex;
			align-items: center;
			& image{
				width:46rpx;height:46rpx;
				margin-left:8rpx;
			}
			& text{
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
			}
		}
	}
	.hot-title{
		padding-bottom:26rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:24rpx;
		.left{
			display: flex;
			align-items: center;
			.title-text{
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}
			& image{
				width:46rpx;height:46rpx;
			}
		}
		.check{
			display: flex;
			align-items: center;
			& image{
				width:46rpx;height:46rpx;
			}
			& text{
				font-size: 24rpx;
				color: rgba(0,0,0,0.4);
			}
		}
	}
	.hot-title::after{
		content: '';
		position: absolute;
		left:0;bottom:0;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
	}
	.navbar-box{
		margin-top:28rpx;
		background-color: #fff;
		z-index:3;
		position: relative;
		.box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding:4rpx;
			box-sizing: border-box;
		}
		.li{
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			flex:1;
			text-align: center;
			height:100%;
			line-height: 72rpx;
		}
		.li.active{
			background-color: #fff;
			font-weight: bold;
			color: #EE5953;
			border-radius: 16rpx;
		}
	}
	.bodys{
		// border-bottom: 2rpx solid #F6F7F9;
		padding-bottom:32rpx;
		.info-box{
			margin-top:24rpx;
			padding:24rpx 24rpx 16rpx;
			background: #F4F5F7;
			border-radius: 16rpx;
			.date{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(0,0,0,0.4);
				// & text:last-child{
				// 	font-size: 24rpx;
				// 	color: #356FE5;
				// }
			}
			.fix-box{
				margin-top:16rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.tab{
					display: flex;
					align-items: center;
					width: 50%;
					margin-top:8rpx;
					& image{
						width:48rpx;height:48rpx;
					}
					& text{
						font-size: 24rpx;
						color: rgba(0,0,0,0.6);
					}
					& text:last-child{
						font-weight: bold;
						color: rgba(0,0,0,0.8);
						padding-left:8rpx;
					}
				}
			}
		}
		.qiun-charts-box{
			.legend{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				margin-top:24rpx;
			}
			.qiun-charts{
				width:654rpx;
				height:318rpx;
				margin-top:16rpx;
			}
		}
	}
	.table-box{
		// margin-top:32rpx;
		.cl-green{
			color: #33C45B !important;
		}
		.table{
			border-top: 2rpx solid #F6F7F9;
			.tr{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				padding:24rpx 0;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
			}
			.box{
				.row{
					padding:24rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F6F7F9;
					.tl{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
					.tl:nth-child(3){
						color: #FF3B30;
					}
				}
				.row:last-child{
					border-bottom:0;
				}
			}
			.tl:nth-child(1){
				width:30%;
				justify-content: center;
			}
			.tl:nth-child(2){
				width:22%;
				justify-content: flex-end;
			}
			.tl:nth-child(3){
				width:22%;
				justify-content: flex-end;
			}
			.tl:nth-child(4){
				width:26%;
				justify-content: flex-end;
			}
			.total{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:32rpx 24rpx 32rpx 20rpx;
				.lab{
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
				}
				.amount{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
					& text:last-child{
						padding-left:54rpx;
						color: #FF3B30;
					}
				}
			}
		}
	}
	.item-box{
		margin-top:32rpx;
		.item{
			border-top: 2rpx solid #F6F7F9;
			padding-top:24rpx;
		}
		.item:last-child{
			padding-top:32rpx;
		}
		.title{
			height: 56rpx;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			line-height: 56rpx;
		}
		.title-green{
			color: #33C45B;
			background: rgba(51,196,91,0.08);
		}
		.title-orange{
			color: #FFA200;
			background: rgba(255,162,0,0.08);
		}
		.table{
			border-top:0;
			.tr{
				.tl{
					justify-content: flex-start;
					& image{
						width:46rpx;height:46rpx;
					}
				}
			}
			.box{
				.row{
					.tl{
						font-size: 24rpx;
						justify-content: flex-start;
					}
					.tl:nth-child(3){
						color: #FF3B30;
					}
					.tl:nth-child(4){
						color: #FF3B30;
					}
				}
			}
			.tl:nth-child(1){
				width:24%;
			}
			.tl:nth-child(2){
				width:24%;
			}
			.tl:nth-child(3){
				width:24%;
			}
			.tl:nth-child(4){
				width:28%;
			}
		}
	}
}
.nodata{
	padding-top:182rpx;
	padding-bottom:24rpx;
	text-align: center;
	& image{
		width:294rpx;height:326rpx;
	}
}
.coefficient-modal,
.explain-modal{
	.explain-box{
		position: fixed;
		left:50%;top:50%;
		width: 654rpx;
		padding:48rpx 32rpx 32rpx;
		box-sizing: border-box;
		transform: translate(-50%,-50%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 16rpx;
		.caption{
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			text-align: center;
		}
		.info{
			font-size: 28rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			min-height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top:48rpx;
		}
		.know{
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			width:100%;
			text-align: center;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top:64rpx;
		}
	}
}
.coefficient-modal{
	.explain-box{
		.info{
			.info-box{
				width:100%;
				.sup{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.4);
				}
				& image{
					width:100%;
				}
				.sub{
					padding:0 44rpx;
					font-size: 28rpx;
					color: rgba(0,0,0,0.8);
					line-height: 56rpx;
				}
			}
		}
	}
}
.nodata{
	padding-top:82rpx;
	padding-bottom:24rpx;
	text-align: center;
	& image{
		width:294rpx;height:326rpx;
	}
}
</style>